<template>
	<view>
		<view class="">
			<view class="   ">
				<view class="banmi_flex ">
					<view class="banmi-wap-nav-box">
						<view class="" style="position: absolute;top: 0;width: 350px;background-color: #313133;">
							<view class="banmi_flex p-10 j-b a-c" style="height: 30px; border-top: solid #DCDCDC 2rpx;">
								<view class="">
									<text class="cff">返回</text>
								</view>
								<view class="" style="margin-right: 20px;">
									<text class="cff">默认菜单</text>
								</view>
								<view class="" style="margin-top: 10px;">
									<image style="width: 40rpx;height: 40rpx;" src="@/static/app.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="" style="position: absolute;bottom: 0;width: 350px;">
							<view class="banmi_flex    a-c">
								<view class="banmi_flex j-c a-c p-10"
									style="height: 25px;width: 30px;border: solid 2rpx #DCDCDC;">
									<image style="width: 50rpx;height: 50rpx;" src="@/static/app.png" mode=""></image>
								</view>
								<view class="banmi_flex j-c a-c p-10   nav_width1" v-for="(vo,index) in buttonlist"
									:class="vo.is_Check ? 'butxz' : 'butz'" style="position: relative;">
									<text @click="on_Check(index,-1)" class="f26">{{vo.name}}</text>

									<view style="position: absolute;bottom: 50px;">
										<view @click="on_Check(index,index1)" v-for="(item,index1) in vo.sub_button"
											class="banmi_flex j-c a-c"
											style="height: 45px; font-size: 14px;width: 95px;"
											:class="item.is_Check ? 'butxz' : 'butz'">
											<text>{{item.name}}</text>
										</view>
										<view v-if="vo.sub_button.length!=5" @click="on_Check_add(index)"
											class="banmi_flex j-c a-c"
											style="height: 40px;border: solid 2rpx #DCDCDC;font-size: 30px;width: 95px;">
											<text>+</text>
										</view>
									</view>

								</view>
								<view v-if="buttonlist.length<3" @click="on_add(vo.type)"
									class="banmi_flex j-c a-c p-10   nav_width1" v-for="(vo,index) in button_list">
									<text class="f26">{{vo.name}}</text>
								</view>
							</view>
						</view>
					</view>

					<view v-if="buttonlist.length>0" class="m-l-10" style="width: 800px;background-color: #F8F8F8;">
						<view class="p-20 banmi_flex j-b">
							<text>菜单配置</text>
							<view @click="on_del" class="banmi_flex j-c a-c cff "
								style="background-color: #0075FF;width: 100px;height: 35px;border-radius: 5px;">
								<text>删除此菜单</text>
							</view>
						</view>
						<view class="" style="height: 400px;">
							<view class="banmi_flex a-c p-20">
								<view class="" style="width: 80px;	flex-shrink:0;">
									<text class="f-14 c_7">菜单名称:</text>
								</view>
								<view class="m-l-10 ">
									<input type="text" v-model="menu_name"
										style="width: 200px;height: 40px;border-bottom: solid 2px #DCDCDC;">
								</view>
							</view>
							<view class="banmi_flex a-c p-20" v-if="this.menu_type!='menu'">
								<view class="" style="width: 80px;	flex-shrink:0;">
									<text class="f-14 c_7">菜单类型:</text>
								</view>
								<view class=" ">
									<view class="banmi_flex" style="justify-content: flex-start;flex-wrap: wrap;">
										<view style="flex-shrink:0;" class="banmi_flex a-c m-l-10"
											@click="on_menu(index)" v-for="(vo,index) in lei_list">
											<view class="q-y  banmi_flex a-c j-c"
												:class="menu_nav_type == vo.type ? 'key_xz' : 'key_wxz'">
												<text v-if="menu_nav_type== vo.type " class="f-14">✓</text>
											</view>
											<text class="f-14 c_7" style="margin-left: 5px;"
												:class="menu_nav_type== vo.type ? 'key_color' : ''">{{vo.name}}</text>
										</view>
									</view>
								</view>
							</view>
							<!-- 网址类型 -->
							<template v-if="menu_type=='view'">
								<view class="banmi_flex a-c p-20">
									<view class="" style="width: 80px;	flex-shrink:0;">
										<text class="f-14 c_7">*网址:</text>
									</view>
									<view class="m-l-10 ">
										<input type="text" v-model="a_url"
											style="width: 300px;height: 40px;border-bottom: solid 2px #DCDCDC;">
									</view>
								</view>
							</template>
							<!-- 小程序 -->
							<template v-if="menu_type=='miniprogram'">
								<view class="banmi_flex a-c p-20">
									<view class="" style="width: 80px;	flex-shrink:0;">
										<text class="f-14 c_7">*网址:</text>
									</view>
									<view class="m-l-10 ">
										<input type="text" v-model="a_url"
											style="width: 300px;height: 40px;border-bottom: solid 2px #DCDCDC;">
									</view>
								</view>
								<view class="banmi_flex a-c p-20">
									<view class="" style="width: 80px;	flex-shrink:0;">
										<text class="f-14 c_7">*appid:</text>
									</view>
									<view class="m-l-10 ">
										<input type="text" v-model="a_appid"
											style="width: 300px;height: 40px;border-bottom: solid 2px #DCDCDC;">
									</view>
								</view>
								<view class="banmi_flex a-c p-20">
									<view class="" style="width: 80px;">
										<text class="f-14 c_7">*路径:</text>
									</view>
									<view class="m-l-10 ">
										<input type="text" v-model="a_pagepath"
											style="width: 300px;height: 40px;border-bottom: solid 2px #DCDCDC;">
									</view>
								</view>
							</template>
							<!-- 消息 -->
							<template v-if="menu_type=='click'">
								<view class="banmi_flex p-20">

									<view class="" style="width: 80px;">
										<text class="f-14 c_7">发送消息:</text>
									</view>
									<view class="">
										<view class="banmi_flex a-c   bb  pb1" v-for="(vo,index) in reply_list"
											:key="index">
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='text'">
												<text class="f-14">{{vo.content}}</text>
												<view class="f-14 c_7">
													【文字】
												</view>
											</view>
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='music'">

												<view class="f-14 c_7">
													【音乐】
												</view>
											</view>
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='voice'">

												<view class="f-14 c_7">
													【语音】
												</view>
											</view>
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='image'">
												<image style="width: 80px;height: 80px;" :src="vo.attachment" mode="">
												</image>
												<view class="f-14 c_7 m-l-10">
													【图片】
												</view>
											</view>
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='video'">
												<video :controls="false" :show-fullscreen-btn="false"
													style="width: 80px;height: 80px;" v-if="vo.type=='video'"
													:show-center-play-btn="false" :show-play-btn="false"
													:id="'videoId'+index" :src="vo.attachment">
												</video>
												<view class="f-14 c_7 m-l-10">
													【视频】
												</view>
											</view>
											<view class="m-l-10" style="width: 300px;" v-if="vo.type=='applets'">
												<view class="banmi_flex ">
													<view class="f-14 c_7" style="width: 50px;">标题 : </view>
													<text class="f-14 m-l-10">{{vo.title}}</text>
												</view>
												<view class="banmi_flex pt1">
													<view class="f-14 c_7" style="width: 50px;">跳转页 : </view>
													<text class="f-14 m-l-10">{{vo.miniprogram}}</text>
												</view>
												<view class="banmi_flex pt1">
													<view class="f-14 c_7" style="width: 50px;">appid : </view>
													<text class="f-14 m-l-10">{{vo.appid}}</text>
												</view>
												<view class="pt1">
													<image v-if="vo.img_url" style="width: 80px;height: 80px;"
														:src="vo.img_url" mode="">
													</image>
												</view>
												<view class="f-14 c_7 ">
													【小程序】
												</view>
											</view>
											<view class="m-l-10" style="width: 600px;" v-if="vo.type=='news'">
												<view class="banmi_flex ">
													<view class="f-14 c_7" style="width: 55px;">标题 : </view>
													<text class="f-14 m-l-10">{{vo.title}}</text>
												</view>
												<view class="banmi_flex pt1">
													<view class="f-14 c_7" style="width: 55px;">描述 : </view>
													<text class="f-14 m-l-10">{{vo.description}}</text>
												</view>
												<view class="banmi_flex pt1">
													<view class="f-14 c_7" style="width: 55px;">跳转url : </view>
													<text class="f-14 m-l-10">{{vo.url}}</text>
												</view>
												<view class="pt1">
													<image v-if="vo.picurl" style="width: 80px;height: 80px;"
														:src="vo.picurl">
													</image>
												</view>
												<view class="f-14 c_7 ">
													【图文】
												</view>
											</view>
											<view @click="on_content_del(vo.id)" class="f-14 banmi_flex a-c j-c  cff"
												style="background-color: #C0C0C0;width: 50px;height: 20px;border-radius: 5px;margin-left: 20px;">
												删除
											</view>
										</view>
									</view>

								</view>


								<view class="m-l-10 banmi_flex j-b pt1" style="width: 500px;margin-left: 25px;">
									<view class="t-c" @click="on_type('text','文字')">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											文字
										</view>
									</view>
									<view class="t-c ml3" @click="on_type('image','图片')">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											图片
										</view>
									</view>
									<view class="t-c ml3" @click="on_type('video','视频')">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											视频
										</view>
									</view>
									<view @click="on_type('voice','语音')" class="t-c ml3">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											语音
										</view>
									</view>
									<view @click="on_type('music','音乐')" class="t-c ml3">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											音乐
										</view>
									</view>

									<view class="t-c ml3" @click="on_type('applets','小程序')">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											小程序
										</view>
									</view>

									<view @click="on_type('news','图文连接')" class="t-c ml3">
										<image style="width: 40px;height: 40px;" src="@/static/app.png" mode="">
										</image>
										<view class="f26 c_7">
											图文连接
										</view>
									</view>

								</view>
							</template>


						</view>

						<view class="banmi_flex j-f m-l-10">
							<view class="p-10 banmi_flex a-c j-b" style="width: 250px;">
								<view @click="on_sava(0)" class="banmi_flex j-c a-c cff "
									style="background-color: #0075FF;width: 120px;height: 35px;border-radius: 5px;">
									<text>暂时保存</text>
								</view>
								<view @click="on_sava_post(1)" class="banmi_flex j-c a-c cff m-l-10"
									style="background-color: #0075FF;width: 120px;height: 35px;border-radius: 5px;">
									<text>发布到公众号</text>
								</view>
							</view>
						</view>




					</view>
				</view>

			</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-wx-text @on_xuanze="on_xuanze">
			</uni-popup-wx-text>
		</uni-popup>
		<uni-popup ref="alertDialog_image" type="dialog">
			<uni-popup-wx-image :t_type="t_type" :t_name="t_name" @on_add_img="on_add_img">
			</uni-popup-wx-image>
		</uni-popup>
		<uni-popup ref="alertDialog_applets" type="dialog">
			<uni-popup-wx-applets :t_type="t_type" :t_name="t_name" @on_add_img="on_add_applets">
			</uni-popup-wx-applets>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				a_pagepath: '',
				a_url: '',
				a_appid: '',
				t_type: '',
				t_name: '',



				codetime: 8,
				info: {},
				nav_mum: 0,
				is_menu: 'url',
				menu_name: '',
				menu_type: '',
				menu_url: '',
				button_list: [{
					"type": "add",
					"name": "添加+",
					"url": "info"
				}],
				buttonlist: [],
				reply_list: [],

				lei_list: [{
						"type": "view",
						"name": "跳转网页",
						"url": ""
					},
					{
						"type": "miniprogram",
						"name": "跳转小程序",
						"url": "",
						"pagepath": "",
						"appid": "",
					},
					{
						"type": "click",
						"name": "发送消息",
						"url": "text"
					},
					// {
					// 	"type": "click_position",
					// 	"name": "地理消息",
					// 	"url": "position"
					// },
					{
						"type": "pic_sysphoto",
						"name": "相机拍照",
						"key": "sysptoto"
					},
					{
						"type": "pic_weixin",
						"name": "相册图库",
						"key": "pic_weixin"
					}
				],
				t_index_1: '-1',
				menu_nav_type: 'view'
			};
		},
		mounted() {
			this.init();
		},
		watch: {
			menu_name(val) {
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['name'] = val;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['name'] = val;
				}
			},
			a_pagepath(val) {
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['pagepath'] = val;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['pagepath'] = val;
				}
			},
			a_url(val) {
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['url'] = val;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['url'] = val;
				}
			},
			a_appid(val) {
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['appid'] = val;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['appid'] = val;
				}
			},
			reply_list(val) {
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['reply_list'] = val;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['reply_list'] = val;
				}
			}

		},
		methods: {
			on_del() {
				var that = this;
				if (this.t_index_1 == '-1') {
					var k_id = this.buttonlist[this.t_index]['k_id'];
					that.buttonlist = that.buttonlist.filter(t => t.k_id != k_id);
				} else {
					var k_id = this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['k_id'];
					this.buttonlist[this.t_index]['sub_button'] = this.buttonlist[this.t_index]['sub_button'].filter(t => t
						.k_id != k_id);
					var qaa = this.buttonlist[this.t_index]['sub_button'].length;
					if (qaa == 0) {
						this.buttonlist[this.t_index]['type'] = 'view';
						this.buttonlist[this.t_index]['is_Check'] = true;
					}
				}
			},
			on_add_applets(find) {
				this.reply_list.push(find);
			},
			on_content_del(id) {
				this.reply_list = this.reply_list.filter(t => t.id != id);

			},
			on_add_img(list) {
				var reply_list = this.reply_list;
				var c = reply_list.concat(list)
				this.reply_list = c;
			},
			on_xuanze(val) {
				var reply_list = this.reply_list;
				reply_list.push({
					id: 'name@' + Date.now(),
					type: this.type,
					content: val,
					media_id: val,
				})
			},
			on_type(type, name) {
				this.t_name = name;
				this.t_type = type;
				this.type = type;
				if (type == 'text') {
					this.$refs.alertDialog.open()
				} else if (type == 'image' || type == 'voice') {
					this.$refs.alertDialog_image.open()
				} else {
					this.$refs.alertDialog_applets.open()
				}
			},
			async init() {
				var that = this;
				let requestParams = {
					menu_list: 0,
				};
				const ret = await this.Banmikeji.Wechatsreply_set_wechats_init(requestParams);
				if (ret.data.find.wechats_menu) {
					this.buttonlist = ret.data.find.wechats_menu;

					for (var i = 0; i < that.buttonlist.length; i++) {
						if (that.buttonlist[i]['is_Check']) {
							this.t_index = i;
							this.t_index_1 = '-1';
						}
						var list = that.buttonlist[i]['sub_button'];
						for (var k = 0; k < list.length; k++) {
							if (list[k]['is_Check']) {
								this.t_index = i;
								this.t_index_1 = k;
							}
						}
					}
					this.on_Check(this.t_index, this.t_index_1)
				}
			},
			async on_sava(id) {
				uni.showLoading({
					title: '正在保存中'
				})
				let requestParams = {
					menu_list: JSON.stringify(this.buttonlist),
					is_set: id
				};
				const ret = await this.Banmikeji.Wechatsreply_set_wechats_menu(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: "none",
					duration: 5000
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},

			async on_sava_post(id) {
				uni.showLoading({
					title: '正在发布中'
				})
				let requestParams = {
					menu_list: JSON.stringify(this.buttonlist),
					is_set: id
				};
				const ret = await this.Banmikeji.Wechatsreply_set_wechats_menu_post(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: "none",
					duration: 5000
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 500);



			},
			on_menu(index) {



				this.menu_nav_type = this.lei_list[index]['type'];
				this.menu_type = this.lei_list[index]['type'];
				if (this.t_index_1 == '-1') {
					this.buttonlist[this.t_index]['type'] = this.menu_type;
					if (this.menu_type == 'pic_sysphoto' || this.menu_type == 'pic_weixin') {
						this.buttonlist[this.t_index]['key'] = this.lei_list[index]['key'];
					}
					this.buttonlist[this.t_index]['is_set'] = true;
				} else {
					this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['type'] = this.menu_type;
					if (this.menu_type == 'pic_sysphoto' || this.menu_type == 'pic_weixin') {
						this.buttonlist[this.t_index]['sub_button'][this.t_index_1]['key'] = this.lei_list[index]['key'];

					}

				}


			},
			on_is_Check_er() {
				for (var i = 0; i < this.buttonlist.length; i++) {
					this.buttonlist[i]['is_Check'] = false;
					for (var k = 0; k < this.buttonlist[i]['sub_button'].length; k++) {
						this.menu_type = this.buttonlist[i]['sub_button'][k]['is_Check'] = false;
					}
				}
			},
			on_Check_add(index) {
				this.t_index = index;
				var alength = this.buttonlist[index]['sub_button'].length;
				if (alength == 5) {
					return
				}
				this.on_is_Check_er();
				var num = Number(alength) + Number(1);
				var find = {
					"type": "view",
					"name": "子菜单名称" + num,
					"url": "",
					"is_Check": true,
					"pagepath": "",
					"appid": "",
					"key": "key" + index + alength,
					"k_id": "k_id" + index + alength,
					"reply_list": []
				};
				this.buttonlist[index]['type'] = 'menu'
				this.buttonlist[index]['sub_button'].unshift(find);
				this.t_index_1 = 0;

				this.menu_name = this.buttonlist[index]['sub_button'][this.t_index_1]['name'];

				this.menu_type = this.buttonlist[index]['sub_button'][this.t_index_1]['type'];


				this.menu_nav_type = this.menu_type;
				this.a_url = '';
				this.a_pagepath = '';
				this.a_appid = '';
				this.reply_list = [];

				this.buttonlist[index]['is_Check'] = false;

				this.$forceUpdate()

			},
			on_Check(index, index1) {
				this.on_is_Check_er();
				this.t_index = index;
				if (index1 == '-1') { //1级菜单
					this.buttonlist[index]['is_Check'] = true;
					this.menu_name = this.buttonlist[index]['name'];
					this.menu_type = this.buttonlist[index]['type'];
					this.menu_nav_type = this.menu_type;
					this.a_url = this.buttonlist[index]['url'];
					this.a_pagepath = this.buttonlist[index]['pagepath'];
					this.a_appid = this.buttonlist[index]['appid'];
					this.reply_list = this.buttonlist[index]['reply_list'];
				} else { //点击了二级菜单
					this.menu_name = this.buttonlist[index]['sub_button'][index1]['name'];
					this.menu_type = this.buttonlist[index]['sub_button'][index1]['type'];
					this.menu_nav_type = this.menu_type;
					this.a_url = this.buttonlist[index]['sub_button'][index1]['url'];
					this.a_pagepath = this.buttonlist[index]['sub_button'][index1]['pagepath'];
					this.a_appid = this.buttonlist[index]['sub_button'][index1]['appid'];
					this.reply_list = this.buttonlist[index]['sub_button'][index1]['reply_list'];
					this.buttonlist[index]['sub_button'][index1]['is_Check'] = true;;
				}

				this.t_index_1 = index1;

			},
			on_is_Check() {
				for (var i = 0; i < this.buttonlist.length; i++) {
					this.buttonlist[i]['is_Check'] = false;
				}
			},
			on_add(type) {
				this.on_is_Check_er();
				if (type == 'add') {
					this.t_index_1 = '-1';
					var num = Number(this.buttonlist.length) + Number(1);
					var find = [{
						"type": "view",
						"name": "菜单名称" + num,
						"url": "",
						"is_Check": true,
						"sub_button": [],
						"pagepath": "",
						"appid": "",
						"key": "key" + num,
						"k_id": "k_id" + num,
						"reply_list": []
					}];

					this.menu_name = find[0]['name'];
					this.buttonlist = this.buttonlist.concat(find);
					this.t_index = this.buttonlist.length - 1;

					this.menu_type = 'view';
					this.menu_nav_type = 'view';

					this.a_url = '';
					this.a_pagepath = '';
					this.a_appid = '';
					this.reply_list = [];

				}




			},

		}
	}
</script>

<style lang="scss">
	.butz {
		border: solid 2rpx #DCDCDC;
		height: 25px;
	}

	.butxz {
		border: solid 1rpx #4191F8;
		height: 25px;
	}

	.nav_width3 {
		width: 86px;
	}

	.nav_width2 {
		width: 172px;
	}

	.nav_width1 {
		width: 300px;
		height: 25px;
	}

	.c_7 {
		color: #777777;
	}

	.key_color {
		color: #1E90FF;
	}

	.key_xz {
		width: 15px;
		height: 15px;
		border: solid 1px #1E90FF;
		color: #1E90FF;
	}

	.key_wxz {
		width: 15px;
		height: 15px;
		border: solid 1px #7C838B;
		color: #7C838B;
	}
</style>